<template>
	<char-base :options="chartOptions" class="chartline"></char-base>
</template>

<script>
	import charBase from '../chart/chart-base'
	import { getColorList,getxAxis,getSeriesStyle,getChartGrid } from '../chart/chart-config'
	export default {
		name: 'wioc-chart-com',
		components: {
			charBase
		},
		props:["componentParams"],
		data() {
			return {
				chartConfig:{
					columns:["AREA_CODE","TYPE_NAME"],
					rows:["CLASS1_NAME"],   // 表示x轴列
					filters:[],
					values:["COUNT_NUM"]
				},
				chartOrigin:{
					"columnList": [{
						"index": 0,
						"aggType": "pie",   // 图表列型  line,linearea,pie,bar,map
						"name": "AREA_CODE"
					}, {
						"index": 1,
						"aggType": "bar",   // 图表列型  line,linearea,pie,bar,map
						"name": "TYPE_NAME"
					}, {
						"index": 2,
						"aggType": "row",
						"name": "CLASS1_NAME"
					}, {
						"index": 3,
						"aggType": "sum",
						"name": "COUNT_NUM"
					}],
					list:[{
						"name":"线上办理",
						 type:"line",
						"data":[120, 132, 101, 134, 190, 230, 210, 220, 182, 191, 234, 290]
					},{
						"name":"行政服务中心",
						 type:"line",
						"data":[220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 190]
					},{
						"name":"13个街道镇社区",						
						"data":[320, 332, 301, 190, 330, 410, 290, 330, 310, 334, 390, 330],
					},{
						"name":"线下办理",						
						"data":[320, 332, 301, 190, 330, 410, 290, 330, 310, 334, 390, 330],
					}],
					"data": [
						["310116", "污染种类统计", "大气污染", "335.0"],
						["310116", "污染种类统计", "其他", "350.0"],
						["310116", "污染种类统计", "噪音污染", "235.0"],
						["310116", "污染种类统计", "固体污染", "135.0"],
						["310116", "污染种类统计", "水污染", "300.0"]
					]
				},
				style:{},
				chartOptions:{}
			}
		},
		watch:{
			"dynamicDataResult": {
				handler() {
					this.setChartOptions(this.dynamicDataResult.data)
				},
				deep: true
			}
		},
		mounted(){
			this.getSeries();
			this.setChartOptions(this.chartOrigin)
		},
		methods:{
			getSeries(){
				let columnIndex = []
				let rowIndex = []
				let dataIndex = []
				
				this.chartOrigin.columnList.forEach((subItem) => {
					// 过滤列索引
					this.chartConfig.columns.forEach((item) => {
						if(subItem.name === item){
							columnIndex.push[subItem.index]
						}
					})
					// 过滤列索引
					this.chartConfig.rows.forEach((item) => {
						if(subItem.name === item){
							rowIndex.push[subItem.index]
						}
					})
					// 过滤值索引
					this.chartConfig.values.forEach((item) => {
						if(subItem.name === item){
							dataIndex.push[subItem.index]
						}
					})
				})
				let columns = []
				// 数据重新组装
				this.chartOrigin.data.forEach((item,index) => {
					let columnName = ''
					columnIndex.forEach((i)=>{
						columnName += item[i]
					})
					columns.push(columnName);
					
					rowIndex.forEach((i)=>{
						columnName += item[i]
					})
				    
				})
				//
				columns = Array.from(new Set(columns))
				
			},
			setChartOptions(renderData) {
				let colorList = getColorList()
				let legendData = [];
				let tempSeries = [];
				renderData.list.forEach((item,index)=>{
					legendData.push(item.name)
					tempSeries.push(getSeriesStyle(item.type ? item.type : "bar",item,index))
				})
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#64a5e5',
							}
						},
						textStyle: {
							fontSize: 24,
						},
					},
					legend: {
						show: true,
						x: 'center',
						y: '10',
						icon: 'stack',
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							color: '#fff',
							fontSize: 24,
						},
						data: legendData
					},
					grid: getChartGrid(),
					xAxis: [
						{
							name: '',
							nameTextStyle: {
								color: "#fff",
								fontSize: 24
							},
							type: 'category',
							axisLine: {
								lineStyle: {
									color: '#64a5e5',
									width: this.lineWidth,
									type: "solid"
								}
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: "#758897",
									fontSize: 24
								}, 
								rotate:40  
							},
							splitLine: {
								show:true,
								lineStyle: {
									color: '#346690'
								}
							},
			
							data: renderData.columns
						}
					],
					yAxis: [{
						nameTextStyle: {
							color: "#00c7ff",
							fontSize: 20
						},
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#00c7ff',
								width: this.lineWidth,
								type: "solid"
							}
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								color: "#758897",
								fontSize: 24
							}
						},
						splitLine: {
							lineStyle: {
								color: '#346690'
							}
						}
					}],
					series: tempSeries
				};
				this.chartOptions = option
			},
			
		}
	}
</script>
<style lang="less" scoped="scoped">
	.chartline {
        width: 100%;
		height: 440px;
	}
</style>
